<template>
  <!-- 所有角色皆可访问此页面 -->
  <div class="space-container">
    <img :src="craftsman.image_src==null?defaultBackImg:craftsman.image_src" />
    <div class="space-imgBox" />

    <div class="space-content">
      <div class="space-title" v-if="user">
        <img :src="getAvatar==null?defaultAvatar:getAvatar" />
        <span v-if="user.nickname==null">用户{{defaultUsername}}</span>
        <span v-else>{{user.nickname}}</span>
        <span>{{craftsman?craftsman.rank:user.bio}}</span>
      </div>

      <div class="space-info" v-if="user">
        <div class="space-info-float" v-if="checkVerified()">
          <!-- 匠人 -->
          <div class="space-info-item">
            <span>{{user.goods_count}}</span>
            <span>作品</span>
          </div>
          <div class="space-divi" />
          <div class="space-info-item">
            <span>{{user.blog_count}}</span>
            <span>博客</span>
          </div>
        </div>
        <div class="space-info-float" v-else>
          <!-- 普通用户 -->
          <div class="space-info-item">
            <span>{{user.note_count}}</span>
            <span>手记</span>
          </div>
          <div class="space-divi" />
          <div class="space-info-item">
            <span>{{user.note_comment_count}}</span>
            <span>评论</span>
          </div>
        </div>
        <div class="space-info-float">
          <div class="space-info-item">
            <span>{{user.follow_count}}</span>
            <span>关注</span>
          </div>
          <div class="space-divi" />
          <div class="space-info-item">
            <span>{{user.fan_count}}</span>
            <span>粉丝</span>
          </div>
        </div>
      </div>

      <Tabs>
        <TabPane label="作品" v-if="checkVerified()">
          <div class="space-goods-box" v-if="goodsData">
            <goodsItem v-for="item in goodsData.data" :key="item.id" :goodsData="item" />
          </div>
          <Page
            v-if="goodsData"
            :total="goodsData.total"
            :page-size="goodsData.per_page"
            @on-change="onGoodsPageChange"
          />
        </TabPane>
        <TabPane label="交流">
          <div class="space-com-box">
            <div class="com-left">
              <h3>手 记</h3>
              <divider/>
              <List item-layout="vertical" split>
                <ListItem v-for="(item, index) in noteList.data" :key="index">
                  <ListItemMeta :avatar="item.user.avatar" :title="item.user.nickname">
                    <template slot="description">
                      <Time :time="item.create_time" />
                    </template>
                  </ListItemMeta>
                  {{ item.content}}
                  <br />
                  <Tag>#{{item.zone.title}}</Tag>

                  <!-- 手记列表右侧图片展示区 -->
                  <template slot="extra">
                    <!-- 单张图片 -->
                    <img
                      :src="parseImgList(item.image_src)"
                      style="width: 200px"
                      @click="handleNotePreview(parseImgList(item.image_src))"
                      v-if="typeof(parseImgList(item.image_src)) == 'string'"
                    />

                    <!-- 多张图片 -->
                    <swiper :options="swiperOption" style="width: 200px" v-else>
                      <swiper-slide
                        v-for="(img,index) in parseImgList(item.image_src)"
                        :key="index"
                      >
                        <div class="note-priview-box">
                          <img :src="img" @click="handleNotePreview(img)" style="width:200px" />
                        </div>
                      </swiper-slide>

                      <div class="swiper-pagination" slot="pagination" />
                    </swiper>
                  </template>

                  <Modal v-model="notePreview" footer-hide :mask="false">
                    <img :src="imgUrl" v-if="notePreview" style="width: 100%" />
                  </Modal>
                </ListItem>
              </List>
            </div>

            <div id="divider"></div>

            <div class="com-right">
              <h3>帖 子</h3>
              <divider/>
              <template v-if="checkVerified()">
              <Blog v-for="(item,id) in blogList.data" :key="id" :blogItem="item" />
              </template>
              <h4 v-else>成为匠人后即可解锁帖子模块哦</h4>
            </div>
          </div>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
import { getBasicInfo, getDetailInfo, AuthCheck } from "../utils/mixin";
import _ from "lodash";
import Blog from "../components/Blog_Item";
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  name: "space",
  mixins: [getBasicInfo, getDetailInfo, AuthCheck],
  props: {
    id: String // 获取路由传过来的参数
  },
  components: {
    goodsItem: () => import("@/components/Goods_Item.vue"),
    swiper,
    swiperSlide,
    Blog
  },
  data() {
    return {
      defaultAvatar: require("@/assets/img/default.png"),
      defaultBackImg: require("@/assets/img/login-bg2.png"),
      goodsData: "",
      craftsman: { image_src: null },
      noteList: "",
      blogList: "",
      imgUrl: "",
      notePreview: false,
      swiperOption: {
        loop: false,
        autoplay: false,
        pagination: {
          el: ".swiper-pagination",
          dynamicBullets: true,
          dynamicMainBullets: 1
        }
      }
    };
  },
  computed: {
    defaultUsername() {
      return _.toUpper(
        _.truncate(this.$store.state.token, {
          length: 6,
          omission: ""
        })
      );
    }
  },
  beforeMount () {
    this.axios
      .get(`/api/note?uid=${this.getUid}`)
      .then(noteRes => {
        this.noteList = noteRes.data;
      })
      .catch(error =>
        this.$Notice.error({ title: "网络连接失败", desc: error })
      );
    if (this.getCid !== 0)
      this.axios
        .all([
          this.axios.get(`/api/blog?cid=${this.getCid}`),
          this.axios.get(`/api/goods?craftsman=${this.getCid}&status=2`)
        ])
        .then(
          this.axios.spread((blogRes, goodsRes) => {
            this.blogList = blogRes.data;
            this.goodsData = goodsRes.data;
          })
        )
        .catch(error =>
          this.$Notice.error({ title: "网络连接失败", desc: error
           })
        );
  },
  methods: {
    onGoodsPageChange(page) {
      this.axios
        .get(`/api/goods?craftsman=${this.getCid}&status=2&page=${page}`)
        .then(res => (this.goodsData = res.data))
        .catch(error => console.log("error :", error));
    },
    handleNotePreview(url) {
      this.imgUrl = url;
      this.notePreview = true;
    },
    parseImgList: list => JSON.parse(list).url
  }
};
</script>
